<template>
    <div class="wallet-detail">
        <el-card class="box-card wallet-content">
            <div class="wallet-detail-wrapper">
                <img class="wallet-icon" :src="require(`../images/Oval1.png`)">
                <div class="wallet-detail-info">
                    <p class="wallet-name">{{$route.query.name}}</p>
                    <p class="balance">
                        <span class="wallet-name">{{wallet && wallet.balance}} DLB</span>
                    </p>
                    <p class="address" ref="address">
                        <span id="msg">{{wallet && wallet.address}}</span>
                    </p>
                </div>
                <ul class="wallet-operate">
                    <li class="refresh">
                        <refresh :text="$t('wallet.refresh')" @refreshData="refreshData"></refresh>
                    </li>
                    <li class="send" @click="handleSend">
                        <span>{{$t('wallet.send')}}</span>
                    </li>
                    <li class="receive"  @click="handleAccept">
                        <span>{{$t('wallet.accept')}}</span>
                    </li>
                    <li class="copy" @click="doCopy" data-clipboard-target="#msg">
                        <span>{{$t('wallet.copyAddress')}}</span>
                    </li>
                    <el-popover placement="bottom" popper-class="more-popper" trigger="click">
                        <p class="pop lightBlack" @click="exportKeystore">{{$t('wallet.exportKeystore')}}</p>
                        <!-- <p class="pop lightBlack" @click="showPriKey">{{$t('wallet.viewPrivate')}}</p> -->
                        <p class="pop lightBlack" @click="updatePassword">{{$t('wallet.modifyPsw')}}</p>
                        <p class="pop lightBlack" @click="deleteWallet">{{$t('wallet.deleteWallet')}}</p>
                        <li class="more" slot="reference">
                            <span>{{$t('wallet.more')}}</span>
                        </li>
                    </el-popover>
                </ul>
            </div>
        </el-card>
        <div class="inner">
            <div class="title">{{$t('wallet.record')}}</div>
            <el-card class="box-card wallet-content">
                <div class="wallet-trade-wrapper">
                    <tradeList-component ref="mychild" @sendData="sendData"></tradeList-component>
                </div>
            </el-card>
        </div>
        <el-dialog :title="$t('wallet.modify')" :visible.sync="exportFlag" class="send-dialog" :modal="false">
            <div class="text">{{$t('wallet.importTxt')}}</div>
            <div class="text">{{$t("wallet.walletAddress")}}：{{wallet.address}}</div>
            <!-- <p class="inputb">
                <el-input v-model.trim="password" type="password" :placeholder="$t('wallet.enterPsw')" @input="pswNull=false"></el-input>
            </p> -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="exportFlag=false" type="default">{{$t('form.cancel')}}</el-button>
                <el-button type="primary" class="detailFile">
                    {{$t('form.sure')}}<input type="file" title=" " id="detailFile" ref="inputDelFile" webkitdirectory @change="getFile">
                </el-button>
            </div>
        </el-dialog>
        <!-- <el-dialog :title="$t('wallet.walletPrivate')" :visible.sync="showKeyFlag" class="send-dialog" :modal="false">
            <div class="text">{{$t('wallet.viewPrivateTxt')}}</div>
            <div class="text">{{$t("wallet.walletAddress")}}：{{wallet.address}}</div>
            <p class="inputb">
                <el-input v-model.trim="password" type="password" :placeholder="$t('wallet.enterPsw')" @input="pswNull=false"></el-input>
            </p>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showKeyFlag=false" type="default">{{$t('form.cancel')}}</el-button>
                <el-button @click="handleConfirm()" type="primary" :disabled="password?false:true">{{$t('form.sure')}}</el-button>
            </div>
        </el-dialog> -->
        <el-dialog :title="$t('wallet.modifyPsw')" :visible.sync="updatePwdFlag" class="send-dialog" :modal="false" @close="closeDialog">
            <div class="text">{{$t('wallet.modifyPswTxt')}}</div>
            <div class="text">{{$t("wallet.walletAddress")}}：{{wallet.address}}</div>
            <el-form ref="password" :model="form" :rules="formRules">
                <el-form-item prop="oldPassword">
                    <el-input v-if="visible" type="password" v-model.trim="form.oldPassword" :placeholder="$t('wallet.enterOldPsw')">
                        <i slot="suffix" title="显示密码" @click="changePass('show')" class="iconToggle icon-eye"></i>
                    </el-input>
                    <el-input v-else type="text" v-model.trim="form.oldPassword" :placeholder="$t('wallet.enterOldPsw')">
                        <i slot="suffix" title="隐藏密码" @click="changePass('hide')" class="iconToggle icon-hide"></i>
                    </el-input>
                </el-form-item>
                <p class="modal-info">!!! {{$t('wallet.walletBackUpInfo')}}</p>
                <el-form-item prop="newPassword">
                    <el-input v-if="visible1" type="password" v-model.trim="form.newPassword" :placeholder="$t('wallet.enterNewPsw')">
                        <i slot="suffix" title="显示密码" @click="changePass1('show')" class="iconToggle icon-eye"></i>
                    </el-input>
                    <el-input v-else type="text" v-model.trim="form.newPassword" :placeholder="$t('wallet.enterNewPsw')">
                        <i slot="suffix" title="隐藏密码" @click="changePass1('hide')" class="iconToggle icon-hide"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="newPassword2">
                    <el-input v-if="visible2" type="password" v-model.trim="form.newPassword2" :placeholder="$t('wallet.repeatPsw')">
                        <i slot="suffix" title="显示密码" @click="changePass2('show')" class="iconToggle icon-eye"></i>
                    </el-input>
                    <el-input v-else type="text" v-model.trim="form.newPassword2" :placeholder="$t('wallet.repeatPsw')">
                        <i slot="suffix" title="隐藏密码" @click="changePass2('hide')" class="iconToggle icon-hide"></i>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatePwdFlag=false" type="default">{{$t('form.cancel')}}</el-button>
                <el-button @click="handleUpdate" type="primary" :disabled="form.oldPassword&&form.newPassword&&form.newPassword2?false:true">{{$t('form.sure')}}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('wallet.warning')" :visible.sync="delWalletFlag" class="send-dialog" :modal="false">
            <div class="text">{{$t('wallet.deleteTxt')}}</div>
            <div class="text">{{$t("wallet.walletAddress")}}：{{wallet.address}}</div>
            <div class="text modal-info">!!! {{$t('wallet.walletDeleteInfo')}}</div>
            <p class="inputb">
                <el-input v-model.trim="password" type="password" :placeholder="$t('wallet.enterPsw')" @input="pswNull=false"></el-input>
            </p>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="delWalletFlag=false" type="default">{{$t('form.cancel')}}</el-button>
                <el-button @click.native="handleConfirm('delete')" type="primary" :disabled="password?false:true">{{$t('form.sure')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import refresh from '@/components/refresh/refresh';
import tradeListComponent from '@/components/trade/list';
import Clipboard from 'clipboard';
import { getAccountInfo, exportwallet, changePassword, removeWallet } from '../../../createAccount'
import fs from 'fs'
export default {
    name: "o-wallet-details",
    components:{
        refresh,
        tradeListComponent
    },
    data() {
        return{
            exportFlag:false,
            showKeyFlag: false,
            updatePwdFlag: false,
            delWalletFlag: false,
            wallet: {},
            password: '',
            pswNull:false,
            form: {
                oldPassword: '',
                newPassword: '',
                newPassword2: ''
            },
            visible: true,
            visible1: true,
            visible2: true
        }
    },
    computed: {
        formRules() {
            return{
                oldPassword: [
                    {required: true, message: this.$t('form.nonOldPsw'), trigger: 'blur'},
                ],
                newPassword: [
                    {required: true, message: this.$t('form.nonPsw'), trigger: 'blur'},
                    {min: 6, message: this.$t('form.less6'),trigger: 'blur'},
                    {validator: this.checkPass1, trigger: 'blur'}
                ],
                newPassword2: [
                    {validator: this.checkPass2, trigger: 'blur'}
                ]
            }
        }
    },
    activated(){
        this.reset()
    },
    methods: {
        reset(){
            this.exportFlag =false;
            this.showKeyFlag = false;
            this.updatePwdFlag = false;
            this.delWalletFlag = false;
            this.wallet = {};
            this.password = '';
            this.pswNull=false;
            this.form = {
                oldPassword: '',
                newPassword: '',
                newPassword2: ''
            }
        },
        changePass(value) {
            this.visible = !(value === 'show');
        },
        changePass1(value) {
            this.visible1 = !(value === 'show');
        },
        changePass2(value) {
            this.visible2 = !(value === 'show');
        },
        getFile(){
            let file = document.getElementById('detailFile').files[0];
            let name = file.name;
            let dirPath = file.path.replace(name,'') + name;
            // console.log(dirPath)
            
            // 导出Keystore
            exportwallet(this.$route.query.publicKey,dirPath,(resp)=>{
                console.log(resp)
                if(resp.code == 200){
                    // 导出成功
                    this.$message({
                        message: this.$t('wallet.exportSuccess'),
                        type: 'success'
                    })
                }else{
                    // 导出失败
                    this.$message({
                        message: this.$t('wallet.exportFail'),
                        type: 'error'
                    })
                }
                this.exportFlag = false;
            })

            this.$refs.inputDelFile.value = null;
        },
        checkPass1(rule, value, callback){
            if (value === '') {
                callback(new Error(this.$t('form.nonRepPsw')));
            } else if (value == this.form.oldPassword){
                // 设置的新密码不能与旧密码一致
                callback(new Error(this.$t('form.pwdMatch')));
            } else {
                callback();
            }
        },
        checkPass2(rule, value, callback){
            if (value === '') {
                callback(new Error(this.$t('form.nonRepPsw')));
            } else if (value !== this.form.newPassword){
                callback(new Error(this.$t('form.disMatch')));
            } else {
                callback();
            }
        },
        doCopy(){
            let clipboard = new Clipboard('.copy');
            //成功回调
            clipboard.on('success', e => {
                // console.info('Text:', e.text);
                this.$message({
                    message: this.$t('wallet.copySuccess'),
                    type: 'success'
                });
                clipboard.destroy()
            });
            //失败回调
            clipboard.on('error', e => {
                this.$message({
                    message: this.$t('wallet.copyFail'),
                    type: 'warning'
                });
                clipboard.destroy()
            });
        },
        closeDialog(){
            this.$refs['password'].resetFields();
        },
        handleSend(){
            if((this.wallet.balance-0)==0){
                this.$message({
                    message: this.$t('wallet.cannotTrans'),
                    type: 'warning'
                });
                return;
            }
            this.$router.push({
                path: '/o-wallet-send',
                query:{
                    publicKey: this.$route.query.publicKey,
                    balance: this.wallet.balance
                }
            })
        },
        handleAccept(){
            this.$router.push({
                path: '/o-wallet-accept',
                query: {
                    address: this.wallet.address
                }
            })
        },
        handleCancel(){
            this.exportFlag = false;
            this.showKeyFlag = false;
            this.updatePwdFlag = false;
            this.delWalletFlag = false;
        },
        handleConfirm(type){
            if( type == 'delete' ) {
                removeWallet(this.$route.query.publicKey,this.password,(resp)=>{
                    console.log(resp)
                    if(resp.code == 200){
                        // 删除成功
                        this.$message({
                            message: this.$t('wallet.deleteSuccess'),
                            type: 'success'
                        })
                        this.$router.push('/o-wallet-list')
                    }else{
                        // 删除失败
                        this.$message({
                            // message: this.$t('wallet.deleteFail'),
                            message: resp.msg,
                            type: 'error'
                        })
                    }
                })
            }
        },
        handleUpdate(){
            this.$refs['password'].validate((valid) => {
                if(valid) {
                    changePassword(this.wallet.address,this.form.oldPassword,this.form.newPassword,(resp)=>{
                        console.log(resp)
                        if(resp.code == 200){
                            // 修改密码成功
                            this.$message({
                                message: this.$t('wallet.modifyPswSuccess'),
                                type: 'success'
                            })
                        }else{
                            // 修改密码失败
                            this.$message({
                                // message: this.$t('wallet.modifyPswFail'),
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.updatePwdFlag = false;
                    })
                }
            })
        },
        exportKeystore(){
            this.exportFlag = true;
            this.showKeyFlag = false;
            this.updatePwdFlag = false;
            this.delWalletFlag = false;
        },
        showPriKey(){
            this.exportFlag = false;
            this.showKeyFlag = true;
            this.updatePwdFlag = false;
            this.delWalletFlag = false;
        },
        updatePassword(){
            this.exportFlag = false;
            this.showKeyFlag = false;
            this.updatePwdFlag = true;
            this.delWalletFlag = false;

            this.form = {
                oldPassword: '',
                newPassword: '',
                newPassword2: ''
            }
        },
        deleteWallet(){
            this.exportFlag = false;
            this.showKeyFlag = false;
            this.updatePwdFlag = false;
            this.delWalletFlag = true;

            this.password='';
            this.pswNull = false;
        },
        sendData(data){
            this.wallet = data
        },
        refreshData(){
            this.$refs.mychild.parentHandleclick();
        }
    }
}
</script>

<style lang="less" scoped>
.wallet-detail{
    position:absolute;
    top:65px;
    bottom:22px;
    left:10px;
    right:10px;
    .wallet-content{
        .wallet-detail-wrapper{
            display: flex;
            font-size: 12px;
            color: #24272B;
            .wallet-name{
                font-size: 14px;
                color: #24272B;
                font-weight:600;
                word-break: break-all;
            }
            .balance{
                padding-left:18.2px;
                background:url("../images/icon-wallet.png") no-repeat left center;
            }
            .address{
                padding-left:18.2px;
                background:url("../images/icon-positioning.png") no-repeat left center;
                #msg{
                    -moz-user-select: text; /*火狐*/
                    -webkit-user-select: text; /*webkit浏览器*/
                    -ms-user-select: text; /*IE10*/
                    -khtml-user-select: text; /*早期浏览器*/
                    user-select: text;
                }
            }
            .wallet-icon{
                width: 40px;
                height: 40px;
                margin: 21px 12px 0 0;
            }
            .wallet-detail-info{
                flex-grow:1;
                p{
                    margin-bottom: 12px;
                }
            }
            .wallet-operate{
                margin-top:30px;
                display:flex;
                justify-content: space-between;
                margin-right: 20px;
                >li{
                    padding-top: 32px;
                    margin-left: 10px;
                    cursor:pointer;
                }
                .refresh{
                    padding-top:0px;
                }
                .send{
                    background: url("../images/icon_send.png") no-repeat top center;
                    background-size: 20px 20px;
                }
                .receive{
                    background: url("../images/icon_receive.png") no-repeat top center;
                    background-size: 20px 20px;
                }
                .copy{
                    background: url("../images/icon_copy.png") no-repeat top center;
                    background-size: 20px 20px;
                }
                .more{
                    padding-top: 32px;
                    margin-left: 10px;
                    cursor:pointer;
                    background: url("../images/icon_more.png") no-repeat top center;
                    background-size: 20px 20px;
                }
            }
        }
    }
    .inner{
        width: 100%;
        position: absolute;
        top: 135px;
        bottom: 0;
        .title{
            margin: 15px 0;
            padding-left:20px;
        }
        .box-card{
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 0;
            .wallet-trade-wrapper{
                height:100%;
            }
        }
    }
    .send-dialog{
        .text{
            margin-bottom:10px;
        }
        .modal-info{
            margin-bottom: 10px;
            color: #F56C6C;
        }
        .dialog-footer{
            .detailFile{
                cursor: pointer;
                position:relative;
                input{
                    display:inline-block;
                    width:100%;
                    height:100%;
                    opacity:0;
                    position:absolute;
                    top:0;
                    left:0;
                }
            }
        }
    }
}
</style>